<template>
  <view class="add-vehicle">
    <!-- 顶部车辆图片 -->
    <image class="header-image" src="/static/myCar/组 6@2x.png" mode="aspectFit"></image>
    
    <!-- 表单区域 -->
    <view class="form-container">
      <!-- 车辆类型选择 -->
      <view class="form-item">
        <text class="label">车辆类型</text>
        <picker @change="bindCarTypeChange" :value="carTypeIndex" :range="carTypes">
          <view class="picker-content">{{ carTypeIndex > -1 ? carTypes[carTypeIndex] : '请选择' }}</view>
        </picker>
      </view>
      
      <!-- 车辆型号选择 -->
      <view class="form-item">
        <text class="label">车辆型号</text>
        <picker @change="bindCarModelChange" :value="carModelIndex" :range="carModels">
          <view class="picker-content">{{ carModelIndex > -1 ? carModels[carModelIndex] : '请选择' }}</view>
        </picker>
      </view>
      
      <!-- 车牌号码输入 -->
      <view class="form-item">
        <text class="label">车牌号码</text>
        <input type="text" v-model="formData.plateNumber" placeholder="请输入您的车牌号" />
      </view>
      
      <!-- 车主姓名输入 -->
      <view class="form-item">
        <text class="label">车主姓名</text>
        <input type="text" v-model="formData.ownerName" placeholder="请输入您的姓名" />
      </view>
      
      <!-- 电话号码输入 -->
      <view class="form-item">
        <text class="label">电话号码</text>
        <input type="number" v-model="formData.phone" placeholder="请输入您的手机号" maxlength="11" />
      </view>
      
      <!-- 照片上传 -->
      <view class="form-item">
        <text class="label">照片</text>
        <view class="upload-box" @tap="chooseImage">
          <image v-if="formData.image" :src="formData.image" mode="aspectFit" class="preview-image"></image>
          <view v-else class="upload-placeholder">
            <text class="plus">+</text>
            <text>上传车辆照片</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <button class="submit-btn" type="primary" @tap="submitForm">+ 添加车辆</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      carTypes: ['小型车', '中型车', '大型车'],
      carTypeIndex: -1,
      carModels: ['轿车', 'SUV', '货车'],
      carModelIndex: -1,
      formData: {
        plateNumber: '',
        ownerName: '',
        phone: '',
        image: ''
      }
    }
  },
  methods: {
    bindCarTypeChange(e) {
      this.carTypeIndex = e.detail.value
    },
    bindCarModelChange(e) {
      this.carModelIndex = e.detail.value
    },
    chooseImage() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.formData.image = res.tempFilePaths[0]
        }
      })
    },
    submitForm() {
		uni.navigateTo({
			url:"/pages/myCar/addSuccess/addSuccess"
		})
      // 表单验证
      if (this.carTypeIndex === -1) {
        uni.showToast({ title: '请选择车辆类型', icon: 'none' })
        return
      }
      if (this.carModelIndex === -1) {
        uni.showToast({ title: '请选择车辆型号', icon: 'none' })
        return
      }
      if (!this.formData.plateNumber) {
        uni.showToast({ title: '请输入车牌号码', icon: 'none' })
        return
      }
      if (!this.formData.ownerName) {
        uni.showToast({ title: '请输入车主姓名', icon: 'none' })
        return
      }
      if (!this.formData.phone) {
        uni.showToast({ title: '请输入电话号码', icon: 'none' })
        return
      }
      if (!this.formData.image) {
        uni.showToast({ title: '请上传车辆照片', icon: 'none' })
        return
      }
      
      // 提交表单
      // 这里添加您的提交逻辑
      console.log('提交的表单数据：', {
        carType: this.carTypes[this.carTypeIndex],
        carModel: this.carModels[this.carModelIndex],
        ...this.formData
      })
      
      // 提交成功后返回上一页
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss">
.add-vehicle {
  min-height: 100vh;
  background-color: #fff;
  padding: 20rpx;
  
  .header-image {
    width: 100%;
    height: 300rpx;
  }
  
  .form-container {
    padding: 30rpx;
    
    .form-item {
      margin-bottom: 30rpx;
      
      .label {
        display: inline-block;
        background-color: #2979ff;
        color: #fff;
        padding: 10rpx 30rpx;
        border-radius: 30rpx;
        font-size: 28rpx;
        margin-bottom: 20rpx;
      }
      
      input, .picker-content {
        width: 100%;
        height: 80rpx;
        background-color: #f5f5f5;
        border-radius: 8rpx;
        padding: 0 20rpx;
        font-size: 28rpx;
      }
      
      .picker-content {
        line-height: 80rpx;
        color: #333;
      }
      
      .upload-box {
        width: 200rpx;
        height: 200rpx;
        border: 2rpx dashed #ddd;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        
        .preview-image {
          width: 100%;
          height: 100%;
        }
        
        .upload-placeholder {
          text-align: center;
          color: #999;
          font-size: 24rpx;
          
          .plus {
            font-size: 40rpx;
            margin-bottom: 10rpx;
          }
        }
      }
    }
  }
  
  .submit-btn {
    position: fixed;
    bottom: 40rpx;
    left: 20rpx;
    right: 20rpx;
    background-color: #2979ff;
    color: #fff;
  }
}
</style>